<template>
  <div>
    <!-- nav-bar
      this.$router.push() : 路由跳转
      this.$router.back() : 路由后退  ===== 页面中的后退按钮
    -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()"></van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <van-search
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
      @input="hGetSuggestion_with_jie_liu"
    >
    <!-- #action  ==== slot="action" -->
      <!-- <template slot="action">
        <div>搜索</div>
      </template> -->
      <div slot="action" @click="hSearch">搜索</div>
    </van-search>

    <!-- 2. 搜索建议 -->
    <van-cell-group  v-if="keyword">
      <van-cell
      v-for="(item,index) in cSuggestion"
      :key="index"
      @click="hSearchSuggestion(index)"
      icon="search">
      <div v-html="item"></div>
      </van-cell>
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录"/>
      <van-cell
      v-for="(item,index) in history"
      :key="item"
      :title="item"
      @click="$router.push('/search/result?keyword='+ item)"
      >
        <van-icon name="close"
         @click.stop="hDeleteHistory(index)"
        ></van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search.js'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 搜索关键字
      suggestion: [], // 当前的搜索建议
      history: ['css', 'html'] // 保存历史记录
    }
  },
  computed: {
    // 用计算属性来去suggestion中保存内容做高亮
    cSuggestion () {
      const reg = new RegExp(this.keyword, 'gi')
      // 对suggestion中的每一项进行正则替换，得到具备高亮效果的字符串
      const arr = this.suggestion.map(str => {
        return str.replace(reg, function (s) {
          return `<span style="color:red;">${s}</span>`
        })
      })
      return arr
    }
  },
  methods: {
    // 用户点击了删除历史记录
    hDeleteHistory (index) {
      this.history.splice(index, 1)
    },
    // 搜索的第1种方法：用户在搜索建议上点击了
    hSearchSuggestion (index) {
      console.log(index)
      // 1. 把当前的搜索建议 添加到搜索历史记录中去
      this.addHistory(this.suggestion[index])
      // 2. todo 跳转到搜索结果页
      this.$router.push({
        path: '/search/result',
        query: {
          keyword: this.keyword
        }
      })
    },
    // 搜索的第2种方法：用户在搜索按钮上点击了
    hSearch () {
      if (this.keyword === '') {
        return
      }
      // 1. 把当前的搜索内容 添加到搜索历史记录中去
      this.addHistory(this.keyword)
      // 2. todo 跳转到搜索结果页
      this.$router.push({
        path: '/search/result',
        query: {
          keyword: this.keyword
        }
      })
    },
    // 搜索历史记录
    addHistory (str) {
      // 如果在history中已经存在，则可以先删除
      // findIndex如果找到了符合条件的元素，则下标不会是-1
      const idx = this.history.findIndex(item => item === str)
      if (idx !== -1) {
        // 有重复项, 删除它
        this.history.splice(idx, 1)
      }
      // 在数组的头部去添加
      this.history.unshift(str)
    },
    // 根据关键字查询搜索建议
    async hGetSuggestion () {
      if (this.keyword === '') {
        this.suggestion = []
        return
      }
      // 调用接口
      const res = await getSuggestion(this.keyword)
      console.log(res)
      this.suggestion = res.data.data.options
    },
    // 当用户输入内容变化时，就会执行 --- 防抖处理
    // 防抖（10秒）: 目标就是降频。一件事如果执行的频率非常快，抖动：没有意义的， 不要让你抖...
    //    思路：
    //      当这个函数被调用时，不是立即执行的时，而是延迟 10 秒再执行.
    //      如果在10秒之内，再次调用这个函数，则从当前被调用的时间开始算，再延迟 10 秒(10秒内不能再次调用函数，
    //       一旦打断，就要重新计时)。
    //       如果10秒内没有再次调用这个函数，则10秒达了之后，执行代码。
    hGetSuggestion_with_fang_dou () {
      console.log('当前用户的输入', this.keyword)
      // 以防抖5s为例： (值越大，越不灵敏)
      // 用户第一次输入第一个字符，代码不会立即去执行（ajax不是立即发出去）
      // 再是等5s之后再发ajax.如果在这5s内，用户输入第二个字符，再向后再延迟5s.
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.hGetSuggestion()
      }, 0.5 * 1000)
    },
    hGetSuggestion_with_jie_liu () {
      console.log('当前用户的输入', this.keyword, (new Date()).toLocaleTimeString())
      // 以节流3s为例： (值越大，越不灵敏)
      // 对于本次调用，检查本次执行距离上一次执行中间是否相隔5秒
      // 是：执行，否：不执行

      if (this.timer) {
        return
      }
      this.timer = setTimeout(() => {
        this.timer = null
        this.hGetSuggestion()
      }, 100) //  3 * 1000
    }
  }
}
</script>

<style>

</style>
